<template>
    <el-space wrap :fill=true direction="vertical" style="width:100%" v-if="blogsArray != null">
        <BlogsInfo :data="blogsArray[0]" />
        <BlogsInfo :data="blogsArray[1]" />
        <BlogsInfo :data="blogsArray[2]" />
        <BlogsInfo :data="blogsArray[3]" />
        <BlogsInfo :data="blogsArray[4]" />
        <BlogsInfo :data="blogsArray[5]" />
        <BlogsInfo :data="blogsArray[6]" />
        <BlogsInfo :data="blogsArray[7]" />
        <BlogsInfo :data="blogsArray[8]" />
        <BlogsInfo :data="blogsArray[9]" />
    </el-space>
    <!-- <el-button @click="Print">test</el-button> -->
</template>

<script setup>
import axios from 'axios';
import { onMounted, ref, watch } from 'vue';
import BlogsInfo from './BlogsInfo.vue';
import { IsLoginIn } from '../functions/IsLoginIn.vue';

const blogsArray = ref([]);

const props = defineProps({
    data: Object,
    ChangeCount: Function,
});

watch(props, (newVal) => {
    // console.log(props.data)
    axios
        .post(props.data.url, {
            need_page: props.data.need_pageNumber,
            search_blogs: props.data.keyword,
            collection_id: props.data.collection_id,
        }, {
            headers: {
                'HOSHINO_T_KK': localStorage.getItem('userToken'),
            }
        })
        .then(response => {
            console.log(response);
            console.log(props.data.collection_id);
            if (response.data.data != null) {
                blogsArray.value = response.data.data.dataList;
            } else {
                blogsArray.value = ref([]);
            }
            console.log(blogsArray.value);
        })
        .catch(function (error) {
            console.error(error);
        });
});

axios
    .post(props.data.url, {
        need_page: props.data.need_pageNumber,
        search_blogs: props.data.keyword,
        collection_id: props.data.collection_id,
    })
    .then(response => {
        console.log(response);
        if (response.data.data != null) {
            blogsArray.value = response.data.data.dataList;
            props.ChangeCount(response.data.data.havePage * 10);
        }
    })
    .catch(function (error) {
        console.error(error);
        console.error(props.data.url);
    });

function Print() {
    console.log(props.data);
}
</script setup>
